<template>
  <div>
    <el-dialog title="档号规则明细" :visible.sync="detailOpen" width="52%"  append-to-body
      :before-close="closeDelDialog">
      <el-form ref="detailForm" :model="detailForm">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="档号存储字段:" label-width="110px" prop="columnname" class="is-required">
              <el-select v-model="detailForm.columnname" placeholder="请选择档号存储字段">
                <el-option v-for="item in colOption" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="规则字段位数:" label-width="110px" prop="digitCount" class="is-required">
              <el-input-number v-model="detailForm.digitCount" @change="handleValueChange"
                controls-position="right"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" style="display: flex;flex-wrap: wrap;margin: 0 0px 0 20px;">
          <ul class="rule-main" v-for="(item, index) in dropdowns" :key="index" style="display: flex;"
            v-show="detailForm.digitCount > 1">
            <li class="select-model">
              <el-form-item label="" prop="" class="is-required">
                <el-select v-model="ziduanarr[index]" placeholder="请选择">
                  <el-option v-for="item in ziduanSOption" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </li>
            <li class="fuhao-model">
              <el-form-item prop="fuhaoarr" style="width:100%">
                <el-input v-model="fuhaoarr[index]" placeholder="请输入"></el-input>
              </el-form-item>
            </li>
          </ul>
          <ul class="rule-main" v-show="this.detailForm.digitCount > 0">
            <li class="select-model select-modelend">
              <el-form-item label="" prop="ziduanEnd">
                <el-select v-model="ziduanEnd" placeholder="请选择">
                  <el-option v-for="item in ziduanEOption" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </li>
          </ul>
        </el-row>
        <el-row class="flex" v-show="this.detailForm.digitCount > 0">
          <el-col :span="10">
            <el-form-item label="(件号/页数)补零位数:" label-width="150px">
              <el-input-number placeholder="请输入" v-model="detailForm.bulingarr" :min="1" :max="10"
                class="inputScore-container"></el-input-number>

            </el-form-item>

          </el-col>
        </el-row>
        <!--start 卷内件、项目  显示模块 -->
        <el-row :gutter="10" v-if="roleRow.type == '1' || roleRow.type == '3'">
          <el-col :span="10">
            <el-form-item label="卷内文件层档号存储字段:" label-width="180px" class="is-required">
              <el-select v-model="detailForm.jiancunchuziduan" placeholder="请选择">
                <el-option v-for="item in jianziduanOption" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item label="" prop="jianlianjie">
              <el-input placeholder="请输入" v-model="detailForm.jianlianjie"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="" prop="jianziduan">
              <el-select v-model="detailForm.jianziduan" placeholder="请选择">
                <el-option v-for="item in jianOption" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="7">
            <el-form-item label="补零位数:" label-width="80px" prop="jianbuling">
              <el-input-number placeholder="请输入" v-model="detailForm.jianbuling" :min="1" :max="10"></el-input-number>
            </el-form-item>
          </el-col>

        </el-row>
        <!-- end -->
        <el-row :gutter="10">
          <el-col :span="10">
            <el-form-item label="电子全文层档号存储字段:" label-width="180px" prop="filecunchuziduan" class="is-required">
              <el-input controls-position="right" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-input placeholder="#" disabled></el-input>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeDelDialog">取消</el-button>
        <el-button type="primary" @click="submitDetail">确定</el-button>
        <el-button type="primary" @click="sortRestore" v-show="isRestore">恢复默认值</el-button> <!--修改的时候显示-->
        <el-button type="primary" @click="detailSort">排序</el-button>
      </div>
    </el-dialog>


    <!-- 档号定义规则明细排序的新增或修改规则 -->
    <!--   :cities="sortData"
              @detail="detail"
            @sortRestore="sortRestore" -->

    <transFer v-if="sortData.length>0" :title="title" :open="sortOpen" :cities="sortData" @closeFilter="closeFilter" @determine="determine"
      :roleDetail="roleDetail" :dataChecked="dataChecked" @detail="sortDetailTap"  ></transFer>
  </div>
</template>
<script>
import transFer from "@/components/transFer/index.vue"
import { getcodecolumnname, getselect, getjianziduanselect, getjiancunchuziduan, addRoleDetail, roleDetailList, updateRoleDetail, getorderleft, getorderright,listforshy } from "@/api/archive/archivesCategory.js";


export default {
  components: {
    transFer
  },
  watch: {
    roleRow: {
      handler: function (newVal, oldVal) {
        //this.roleRow 当前要编辑的数据

        this.roleRow = newVal;
        this.from = {
          categoryId: newVal.categoryId,
          type: newVal.type
        }
        this.getCodecolumnnamePost();
        if (newVal.type == "1" || newVal.type == "3") {
          this.getjianziduanselectPost();
          this.getjiancunchuziduanPost();
        }

        if (newVal.row.eColumnname !== null) {
          this.isRestore = true
          this.detailHandleUpdate();
        } else {
          this.isRestore = false
        }
      },
      immediate:true
    }
  },
  props: ["detailOpen", "roleRow"],
  data() {
    // var digitCount = (rule, value, callback) => {
    //   if (value<=0) {
    //     return callback(new Error("字段位数不能小于0哦!"));
    //   }
    // };
    return {

      roleDetail: true,
      //存放排序列表
      sortData: [],
      //排序左侧列表回显
      dataChecked: [],
      //排序title
      title: "",
      //档号定义排序是否显示弹出窗
      sortOpen: false,
      isRestore: false,
      //传参
      from: "",
      // 档号定义规则明细表单参数
      detailForm: {
        digitCount: "",
        bulingarr: undefined,
        columnname: undefined,
        jiancunchuziduan: undefined,
        jianlianjie: undefined,
        jianziduan: undefined,
        jianbuling: "",
        filelianjie: "#",
        order: undefined,
        categoryId: undefined,
        type: undefined,
        id: undefined,
      },
      //回复默认值
      restoreForm: {},
      ziduanarr: [],
      fuhaoarr: [],
      ziduanEnd: undefined,
      // 档号
      colOption: [],
      //动态渲染输入规则字段的下拉框列表
      dropdowns: [],
      //规则字段参数
      ziduanSOption: [],
      ziduanEOption: [],
      jianziduanOption: [],
      jianOption: [],
      isHideShow:true, //点击确定排序的时候如果档号规则明细信息没有完善会提示，那么排序弹窗是不能消失的
    }

  },
  methods: {
    // 档号定义---修改规则明细
    detailHandleUpdate(row) {
      var that = this;
      var type = ""
      if (this.roleRow.type == '0') {
        type = "f"
      } else if (this.roleRow.type == '1' || this.roleRow.type == '3') {
        type = "v"
      }
      this.getSelectPost();
      roleDetailList(type, this.roleRow.row.id).then(response => {
        that.restoreForm = response.data;

        var count = response.data.ziduanarr.length - 1;
        for (var i = 0; i < count; i++) {
          that.dropdowns.push({})
        }
        for (var i = 0; i < response.data.ziduanarr.length; i++) {
          that.ziduanarr[i] = response.data.ziduanarr[i]
        }
        for (var i = 0; i < response.data.fuhaoarr.length; i++) {
          that.fuhaoarr[i] = response.data.fuhaoarr[i]
        }
        that.detailForm = response.data;
        that.detailForm.digitCount = response.data.bulingarr.length
        that.detailForm.bulingarr = response.data.bulingarr[response.data.bulingarr.length - 1]
        that.ziduanEnd = response.data.ziduanarr[response.data.ziduanarr.length - 1];
      });
    },
    // 档号定义规则明细表单重置
    resetRoleDetail() {
      this.detailForm = {
        columnname: undefined,
        bulingarr: undefined,
        jiancunchuziduan: undefined,
        jianlianjie: undefined,
        jianziduan: undefined,
        jianbuling: undefined,
        filelianjie: "#",
        order: undefined,
        digitCount: ""

      }
      this.fuhaoarr = [];
      this.ziduanEnd = undefined
      this.ziduanarr = [];
      this.dropdowns = [];
    },

    ////档号规则明细获取档号存储字段下拉框
    getCodecolumnnamePost() {
      getcodecolumnname(this.from).then(response => {
        this.colOption = response.data.map(option => {
          return {
            value: option.fieldName,
            label: option.fieldCaption
          }
        })
      })
    },

    //获取规则字段位数
    handleValueChange() {
      const count = this.detailForm.digitCount - 1
      this.dropdowns = [];
      for (var i = 0; i < count; i++) {
        this.dropdowns.push({})
      }
      // console.log(this.detailForm.digitCount, this.dropdowns)
      this.getSelectPost()
      this.ziduanarr = []
      this.ziduanEnd = undefined
      this.fuhaoarr = []
      this.detailForm.bulingarr = ""

    },

    //档号规则明细输入规则字段位数后下拉
    getSelectPost() {
      getselect(this.from).then(response => {
        //response.data[i].isHidden == '0' && response.data[i].fieldType == '1'  获取最后一个下拉框的数据
        this.ziduanEOption = [];
        for (var i in response.data) {
          if (response.data[i].isHidden == '0' && response.data[i].fieldType == '1') {
            this.ziduanEOption.push({
              value: response.data[i].fieldName,
              label: response.data[i].fieldCaption,
            })
          }
        }

      })

      listforshy({
          groupId: this.roleRow.groupId,
          type: this.roleRow.type,
          cateogryId:this.roleRow.categoryId,
          pageNum:1,
          pageSize:20000
        }).then(response => {
          var dataArr=response.rows.filter(res=>{return res.HAD==1})
           this.ziduanSOption = dataArr.map(option => {
          return {
            value: option.FIELD_NAME,
            label: option.FIELD_CAPTION,
          }
        })
        })
    },

    //  档号规则明细获取件档号存储字段
    getjiancunchuziduanPost() {
      getjiancunchuziduan(this.from).then(response => {
        this.jianziduanOption = response.data.map(option => {
          return {
            value: option.fieldName,
            label: option.fieldCaption
          }
        })
      })
    },


    //档号规则明细获取卷内文件下拉
    getjianziduanselectPost() {
      getjianziduanselect(this.from).then(response => {
        this.jianOption = response.data.map(option => {
          return {
            value: option.fieldName,
            label: option.fieldCaption
          }
        })
      })
    },




    //确定
    submitDetail() {
      if (this.detailForm.columnname == undefined) {
        this.$message({ message: '请选择档号存储字段!', type: 'warning' })
        this.isHideShow=false
        return false
      }

      if (this.detailForm.digitCount <= 0) {
        this.$message({ message: '规则字段位数需要大于0!', type: 'warning' })
        this.isHideShow=false
        return false
      } else {

        for (var i = 0; i < parseInt(this.detailForm.digitCount) - 1; i++) {
          if (this.ziduanarr[i] == undefined||this.fuhaoarr[i]=='') {
            this.$message({ message: '请输入第' + (i + 1) + '位组成字段!', type: 'warning' })
            this.isHideShow=false
            return false;
          }
          if (this.fuhaoarr[i] == undefined||this.fuhaoarr[i]=='') {
            this.$message({ message: '请输入第' + (i + 1) + '个组成符号!', type: 'warning' })
            this.isHideShow=false
            return false;
          }
        }

      }

      if (this.ziduanEnd == undefined) {
        this.$message({ message: '请输入第' + parseInt(this.detailForm.digitCount) + '位组成字段!', type: 'warning' })
        this.isHideShow=false
        return false
      }

      if (this.roleRow.type == '1' || this.roleRow.type == '3') {
        if (this.detailForm.jiancunchuz = undefined) {
          this.$message({ message: '请输入卷内文件层档号!', type: 'warning' })
          this.isHideShow=false
          return false
        }
        if (this.detailForm.jianlianjie == undefined) {
          this.$message({ message: '请输入卷内文件层连接符号!', type: 'warning' })
          this.isHideShow=false
          return false
        }
        if (this.detailForm.jianziduan == undefined) {
          this.$message({ message: '请输入卷内文件层件字段!', type: 'warning' })
          this.isHideShow=false
          return false
        }
      }
      var bulingarr = []
      for (let i = 0; i < this.fuhaoarr.length; i++) {
        bulingarr.push("0");
      }
      bulingarr.push(this.detailForm.bulingarr)
      // var ziduanarrData = []
      //如果是修改
      if (this.roleRow.row.eColumnname !== null) {
        // console.log(   this.ziduanarr,this.ziduanEnd,this.ziduanarr.length,this.detailForm.digitCount,"++++")
        if(this.ziduanarr.length!=this.detailForm.digitCount){
          this.ziduanarr.push(this.ziduanEnd);
        }else{
          this.ziduanarr[this.ziduanarr.length-1]=this.ziduanEnd
        }


      } else {
        this.ziduanarr.push(this.ziduanEnd);
      }

      this.detailForm.fuhaoarr = this.fuhaoarr;
      this.detailForm.ziduanarr = this.ziduanarr;
      var data = {
        digitCount: this.detailForm.digitCount,
        bulingarr: bulingarr,
        ziduanarr: this.ziduanarr,
        fuhaoarr: this.fuhaoarr,
        columnname: this.detailForm.columnname,
        jiancunchuziduan: this.detailForm.jiancunchuziduan,
        jianlianjie: this.detailForm.jianlianjie,
        jianziduan: this.detailForm.jianziduan,
        jianbuling: this.detailForm.jianbuling,
        filelianjie: "#",
        order: this.detailForm.order,
        categoryId: this.roleRow.categoryId,
        type: this.roleRow.type,
        id: this.roleRow.row.id,
      }
      if (this.roleRow.row.eColumnname !== null) {
        updateRoleDetail(data).then(response => {
          this.$modal.msgSuccess("修改成功");
           this.isHideShow=true
          this.resetRoleDetail();
          this.$emit("submitDetail")
        });
      } else {
        addRoleDetail(data).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.isHideShow=true
          this.resetRoleDetail();
          this.$emit("submitDetail")
        });
      }
    },
    //关闭
    closeDelDialog() {
      this.resetRoleDetail();
      this.$emit("resetRoleCancel")
    },
    //回复默认值
    sortRestore() {
      this.resetRoleDetail();

      var count = this.restoreForm.ziduanarr.length - 1;
      for (var i = 0; i < count; i++) {
        this.dropdowns.push({})
      }
      for (var i = 0; i < this.restoreForm.ziduanarr.length; i++) {
        this.ziduanarr[i] = this.restoreForm.ziduanarr[i]
      }
      for (var i = 0; i < this.restoreForm.fuhaoarr.length; i++) {
        this.fuhaoarr[i] = this.restoreForm.fuhaoarr[i]
      }
      this.detailForm.columnname = this.restoreForm.columnname;
      this.detailForm.digitCount = this.restoreForm.digitCount;
      this.detailForm.bulingarr = parseInt(this.restoreForm.bulingarr);
      this.detailForm.jiancunchuziduan = this.restoreForm.jiancunchuziduan;
      this.detailForm.jianziduan = this.restoreForm.jianziduan;
      this.detailForm.jianbuling = this.restoreForm.jianbuling;
      this.detailForm.jianlianjie = this.restoreForm.jianlianjie;
      this.ziduanEnd = this.restoreForm.ziduanarr[this.restoreForm.ziduanarr.length - 1];
    },
    // 排序
    detailSort() {
      this.sortData = [];
      this.title = "档号规则明细";
      this.getSortData();
      this.sortOpen = true;
      this.detailOpen=false
    },
    // 左侧排序数据
    getSortData() {
      this.from["id"] = this.roleRow.row.id;
      var sortData = [];
      getorderleft(this.from).then(response => {
        sortData = response.data.map((item,index) => ({
          fieldCaption: item.fieldCaption,
          fieldName: item.fieldName,
          isOrder: 'asc',
        }));

        if (this.roleRow.row.eColumnname !== null) { //修改回显排序数据
           this.getSortrightData(sortData);
        } else {
          this.sortData = sortData;
        }
      })

    },
    // 右侧排序数据
    getSortrightData(sortData) {
      var typeData = ""
      if (this.roleRow.type == 1 || this.roleRow.type == 3) {
        typeData = 1
      } else {
        typeData = 0
      }

      getorderright({ id: this.roleRow.row.id, type: typeData }).then(response => {
        this.dataChecked = response.data  //右侧显示数据

        //先把右侧数据追加放入左侧列表中，为了显示左侧数据
        if (response.data.length > 0) {
          for (var i in this.dataChecked) {
            this.dataChecked[i].isOrder =this.dataChecked[i].order
            sortData.push(this.dataChecked[i])
          }
        }

        for(var k in sortData){
          sortData[k].key=parseInt(k);
        }
        console.log(sortData,"klsjdfklj")

        this.sortData = sortData;
      })
    },
    //排序确定
    determine(value, isOrder) {
      console.log(value,isOrder,"zherenz ")
      var arr1 = []
      for (var j = 0; j < value.length; j++) {
      for (var i = 0; i < isOrder.length; i++) {

          if (isOrder[i].key == value[j]) {
            const str = isOrder[i].code + "$" + isOrder[i].isOrder
            console.log(str,value[j],"klsdfjsdkljfkl")
            arr1.push(str)
          }
        }
      }
      this.detailForm.order = arr1.toString()

      console.log(this.detailForm.order,"---------------------------------")
      this.submitDetail();
      if(this.isHideShow){
        this.sortOpen = false;
      }

    },
    //关闭排序
    closeFilter() {
      this.sortData=[];
      this.closeDelDialog();
      this.sortOpen = false;
      this.isHideShow=true;
    },

    //定义
    sortDetailTap(){
      this.isHideShow=true;
      this.sortOpen = false;
      this.detailOpen=true;
    }
  }
}
</script>

<style lang="scss" scoped>
.el-select {
  width: 100%;

}

::v-deep.el-input input {
  text-align: center;
}

.flex {
  display: flex;
  justify-content: flex-end;
  flex-direction: row
}

.margin-top-form {
  margin-top: 30px;
  margin-bottom: 0 !important;
}

.rule-main,
.rule-main li {
  margin: 0;
  padding: 0;
}

.rule-main {
  width: 32%;
}

.rule-main li {
  // float: left;
  margin: 0 5.2% 0 0;
}

.select-model {
  width: 70%;
}

.fuhao-model {
  //width: 5.06%;
  width: 30%;
  margin-left: 10px;
}

.transfer-box {
  display: flex;

  .transfer-box-left {
    border: 2px solid black;
    border-radius: 10px;
    width: 40%;
    height: 240px;
    overflow-y: scroll;
    margin-left: 20px;

    .box-ul {
      list-style: none;
      line-height: 1.5em;
    }
  }

  .transfer-box-center {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .transfer-box-right {
    border: 2px solid black;
    border-radius: 10px;
    width: 40%;
    height: 240px;
    overflow-y: scroll;
    margin-left: 20px;

    .box-ul {
      list-style: none;
      line-height: 1.5em;
    }
  }

  .box-title-icon {
    color: #f0463f;
  }
}

.select-modelend {
  width: 63% !important;
}


.inputScore-container {

  ::v-deep input::-webkit-outer-spin-button,
  ::v-deep input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
  }

  ::v-deep input[type=‘number’] {
    -moz-appearance: textfield !important;
  }

}

::v-deep .el-dialog {
    padding: 0px 30px 20px 0px !important;
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);
}

::v-deep .el-dialog .el-dialog__body {
    flex: 1;
    overflow: auto;
}

</style>
